export let name = "Coupon-collection-page";
export function Render(){
    return`
    <style>
    /*领券页面*/
   
    .coupon-list {
      background-color: #fff;
      border-radius: 3rem 3rem 0 0  ; 
      padding: 3rem 1.5rem ; 
      height: 60%;
      position: fixed;
      bottom: 0;
      left: 0;
      width: 100%;
    }
    .section-title {
      font-size: 2rem; 
      color: #333;
      font-weight: bold;
      margin-bottom: 1rem; 
    }
    .sub-title {
      font-size: 2rem;
      color: #999;
      margin-bottom: 1rem; 
    }
    .coupon-item {
      display: flex;
      align-items: center;
      justify-content: space-between;
      background-color: #fdfdfd;
      border: 0.5rem solid #f2f2f2;
      border-radius: 1rem; 
      padding: 1rem;
      margin-bottom: 1rem; 
    }
    .tag {
      display: inline-block;
      padding: 1rem 1rem; 
      background-color: #c8f0d0; 
      color: #00cc66; 
      font-size: 3rem; 
      border-radius: 1rem; 
      margin-right: 1rem;
    }
    .coupon-info {
      flex: 1;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
    }
    .coupon-name {
      font-size: 3rem;
      color: #333;
      margin-bottom:1rem; 
    }
    .price {
      font-size: 3rem; 
      color: #ff3333; 
      font-weight: bold;
      margin-bottom: 1rem; 
    }
    .price span {
      font-size: 2rem;
    }
    .desc {
      display: flex;
      justify-content: space-between;
      font-size: 1rem; 
      color: #999;
    }
    .btn {
      min-width: 5rem;
      padding: 1rem 1rem;
      border: none;
      border-radius: 1rem; 
      font-size: 2rem;
      cursor: pointer;
    }
    .get-btn {
      background-color: #00cc66;
      color: #fff;
    }
    .used-btn {
      background-color: #e6e6e6;
      color: #999;
    }
    .getpage{
    width: 100%;
    height: 100%;
    position: fixed;
    top: 0;
    left: 0;
    background-color: rgba(0, 0, 0, 0.4);
    z-index: 1000;
    }
</style>
<div class="getpage" style="display: none">
<div class="backGround"></div>
<div class="coupon-list">
  <h3 class="section-title">优惠券</h3>
  <p class="sub-title">可使用优惠券</p>
  <!-- 优惠券条目 1 -->
  <div class="coupon-item">
    <span class="tag">满减券</span>
    <div class="coupon-info">
      <h4 class="coupon-name">测试全场通用</h4>
      <p class="price">¥<span>50.00</span></p>
      <div class="desc">
        <span>领取时间：2025-07-07 至 2025-07-31</span>
        <span>满100.00可用</span>
      </div>
    </div>
    <button class="btn get-btn">立即领取</button>
  </div>
  <!-- 优惠券条目 2 -->
  <div class="coupon-item">
    <span class="tag">满减券</span>
    <div class="coupon-info">
      <h4 class="coupon-name">1</h4>
      <p class="price">¥<span>2.00</span></p>
      <div class="desc">
        <span>领取时间：2025-06-05 至 2025-07-31</span>
        <span>满10.00可用</span>
      </div>
    </div>
    <button class="btn used-btn">已领取</button>
  </div>
</div>
</div>
    `
}
export function afterRender(){
    let getpriceBtn = document.querySelector(".getpriceBtn");
    let getpage = document.querySelector(".getpage");
    getpriceBtn.addEventListener("click", function () {
        getpage.style.display = "block";
    });


}